<template>
  <div class="low-code-editor">
    <!-- 顶部导航栏 -->
    <div class="editor-header">
      <div class="left-actions">
        <el-button-group>
          <el-button type="primary" plain>
            <el-icon><Setting /></el-icon>
            画布设置
          </el-button>
          <el-button type="primary" plain>
            <el-icon><Monitor /></el-icon>
            PC
          </el-button>
          <el-button type="primary" plain>
            <el-icon><Iphone /></el-icon>
            手机
          </el-button>
          <el-button type="primary" plain>
            <el-icon><DataBoard /></el-icon>
            平板
          </el-button>
        </el-button-group>
      </div>
      <div class="center-actions">
        <el-button-group>
          <el-button type="primary" plain>
            <el-icon><ArrowLeft /></el-icon>
            撤回
          </el-button>
          <el-button type="primary" plain>
            <el-icon><ArrowRight /></el-icon>
            还原
          </el-button>
        </el-button-group>
      </div>
      <div class="right-actions">
        <el-button type="primary">
          <el-icon><Download /></el-icon>
          导出代码
        </el-button>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="editor-main">
      <!-- 左侧组件列表 -->
      <div class="components-panel">
        <div class="component-category">
          <h3>布局组件</h3>
          <div class="component-list">
            <div 
              class="component-item" 
              draggable="true"
              @dragstart="handleDragStart($event, 'grid')"
            >
              <el-icon><Grid /></el-icon>
              <span>栅格布局</span>
            </div>
            <div 
              class="component-item" 
              draggable="true"
              @dragstart="handleDragStart($event, 'container')"
            >
              <el-icon><Menu /></el-icon>
              <span>容器</span>
            </div>
          </div>
        </div>

        <div class="component-category">
          <h3>表单组件</h3>
          <div class="component-list">
            <div 
              class="component-item" 
              draggable="true"
              @dragstart="handleDragStart($event, 'input')"
            >
              <el-icon><Edit /></el-icon>
              <span>输入框</span>
            </div>
            <div 
              class="component-item" 
              draggable="true"
              @dragstart="handleDragStart($event, 'select')"
            >
              <el-icon><Select /></el-icon>
              <span>选择器</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 中间画布区域 -->
      <div 
        class="canvas-panel"
        @dragover.prevent
        @drop="handleDrop"
      >
        <div 
          v-for="(component, index) in canvasComponents" 
          :key="index"
          class="canvas-component"
        >
          <template v-if="component.type === 'grid'">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-placeholder">左侧</div>
              </el-col>
              <el-col :span="12">
                <div class="grid-placeholder">右侧</div>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="component.type === 'container'">
            <div class="container-placeholder">容器</div>
          </template>
          <template v-else-if="component.type === 'input'">
            <el-input placeholder="请输入内容" />
          </template>
          <template v-else-if="component.type === 'select'">
            <el-select placeholder="请选择">
              <el-option label="选项1" value="1" />
              <el-option label="选项2" value="2" />
            </el-select>
          </template>
        </div>
      </div>
      
      <!-- 右侧属性设置 -->
      <div class="properties-panel">
        属性设置
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const canvasComponents = ref([])
const draggedComponent = ref(null)

const handleDragStart = (event, type) => {
  draggedComponent.value = type
  event.dataTransfer.setData('text/plain', type)
}

const handleDrop = (event) => {
  event.preventDefault()
  const type = event.dataTransfer.getData('text/plain')
  if (type) {
    canvasComponents.value.push({
      type,
      id: Date.now()
    })
  }
}
</script>

<style scoped>
.low-code-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-header {
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.left-actions,
.center-actions,
.right-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.editor-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.components-panel {
  width: 250px;
  background-color: #fff;
  border-right: 1px solid #dcdfe6;
  padding: 10px;
}

.canvas-panel {
  flex: 1;
  background-color: #f5f7fa;
  padding: 20px;
  overflow: auto;
  min-height: 100%;
}

.properties-panel {
  width: 300px;
  background-color: #fff;
  border-left: 1px solid #dcdfe6;
  padding: 10px;
}

.component-category {
  margin-bottom: 20px;
}

.component-category h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #606266;
  padding-left: 10px;
}

.component-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  cursor: move;
  transition: all 0.3s;
}

.component-item:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.component-item .el-icon {
  font-size: 16px;
}

.component-item span {
  font-size: 14px;
}

.canvas-component {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}

.grid-placeholder,
.container-placeholder {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  color: #909399;
}
</style> 